import { useState, useEffect } from 'react';
import { show, findDepartment } from '../../../api';
import { useParams, useNavigate } from 'react-router-dom';
import { LikeOutlined, AimOutlined } from '@ant-design/icons';
import { Spin, Tabs, Space, Row, Col, Card } from 'antd';
import './index.css';
const { TabPane } = Tabs;

const Registration = (props) => {
  const [hospital, setHospital] = useState({});
  const [bookingRule, setBookingRule] = useState({});
  const [departments, setDepartments] = useState([]);
  const { hoscode } = useParams();
  const navigate = useNavigate();

  useEffect(async () => {
    const { hospital, bookingRule } = await show(hoscode);
    const departmentsList = await findDepartment(hoscode);
    await setDepartments(departmentsList);
    await setBookingRule(bookingRule);
    await setHospital(hospital);
  }, []);

  if (!hospital.hosname)
    return (
      <div className='m-l-30 m-r-30'>
        <Spin />
      </div>
    );

  const gotoSchedule = (depcode) => {
    navigate(`/hospital/schedule/${hoscode}/${depcode}`);
  };

  return (
    <div className='m-l-30 m-r-30'>
      <div className='title'>
        <h2>{hospital.hosname}</h2>
        <p className='level'>
          <LikeOutlined className='level-icon' />
          {hospital.param.hostypeString}
        </p>
      </div>

      <div className='logo-route'>
        <img
          src={'data:image/jpeg;base64,' + hospital.logoData}
          alt={hospital.hosname}
          className='hospital-img'
        />

        <div className='m-20'>
          <h3>挂号规则</h3>
          <p />
          预约周期：{bookingRule.cycle}天<br />
          放号时间：{bookingRule.releaseTime}
          <br />
          停挂时间：{bookingRule.stopTime}
          <br />
          具体地址：{hospital.param.fullAddress}
          <br />
          规划路线：{hospital.route}
          <br />
          退号时间：
          {bookingRule.quitDay == -1 &&
            `就诊前一工作日${bookingRule.quitTime}前取消`}
          {bookingRule.quitDay == 0 &&
            `就诊前当天${bookingRule.quitTime}前取消`}
          <p />
          <h3>医院预约规则</h3>
          <ol>
            {bookingRule.rule.map((_, idx) => {
              return <li key={idx}>{_}</li>;
            })}
          </ol>
        </div>
      </div>

      <div className='intro'>
        <Tabs defaultActiveKey='1' type='card' tabPosition='left'>
          {departments.map((_) => {
            return (
              <TabPane tab={_.depname} key={_.depcode}>
                <Space size={[8, 16]} wrap>
                  <Row>
                    {_.children.map((item) => {
                      return (
                        <Col
                          span={6}
                          key={item.depcode}
                          className='depName'
                          onClick={() => gotoSchedule(item.depcode)}
                        >
                          <Card hoverable>{item.depname}</Card>
                        </Col>
                      );
                    })}
                  </Row>
                </Space>
              </TabPane>
            );
          })}
        </Tabs>
      </div>
    </div>
  );
};

export default Registration;
